/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
	<div>
		<div class="item-title">
			<div class="subject">
				<h3>商品管理</h3>
				<h5>商城所有商品索引及管理</h5>
			</div>
			<ul class="tab-base nc-row">
				<router-link :to="{name:'goods'}" :active-class="(goodsState == null && isOnSale == null) ? 'current' : ''">
					<li @click="goodsState = null;isOnSale = null;currentPage = 1;getPage()">
						<a>
							<span>所有商品</span>
						</a>
					</li>
				</router-link>
				<router-link :to="{name:'goods'}" :active-class="(goodsState == 0 && isOnSale == null) ? 'current' : ''">
					<li @click="goodsState = 0;isOnSale = null;currentPage = 1;getPage()">
						<a>
							<span>等待审核</span>
						</a>
					</li>
				</router-link>
				<router-link :to="{name:'goods'}" :active-class="(goodsState == 1 && isOnSale == null) ? 'current' : ''">
					<li @click="goodsState = 1;isOnSale = null;currentPage = 1;getPage()">
						<a>
							<span>审核通过</span>
						</a>
					</li>
				</router-link>
				<router-link :to="{name:'goods'}" :active-class="(goodsState == 2 && isOnSale == null) ? 'current' : ''">
					<li @click="goodsState = 2;isOnSale = null;currentPage = 1;getPage()">
						<a>
							<span>审核失败</span>
						</a>
					</li>
				</router-link>
				<router-link :to="{name:'goods'}" :active-class="(goodsState == null && isOnSale == 2) ? 'current' : ''">
					<li @click="goodsState = null;isOnSale = 2;currentPage = 1;getPage()">
						<a>
							<span>违规下架</span>
						</a>
					</li>
				</router-link>
			</ul>
		</div>
		<div id="explanation" class="explanation" style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;">
			<div class="bckopa-tips">
				<div class="title">
					<img src="@/static/images/handd.png" alt />
					<h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
				</div>
				<ul>
					<li>平台可以强制下架商家违规的产品，对于商家发布的商品需要审核.</li>
					<li>上架，当商品处于非上架状态时，前台将不能浏览该商品，店主可控制商品上架状态</li>
					<li>违规下架，当商品处于违规下架状态时，前台将不能购买该商品，只有管理员可控制商品违规下架状态，并且商品只有重新编辑后才能上架</li>
				</ul>
			</div>
			<span title="收起提示" id="explanationZoom" style="display: block;"></span>
		</div>

		<div class="mDiv">
			<div class="ftitle">
				<h3>商品列表</h3>
				<h5>(共 {{totalCount}} 条记录)</h5>
			</div>
			<div v-if="doGoodsList.length > 0">
				<div class="fbutton">
					<div class="add" @click="doGoodsListStatus(0)">
						<span>
							<i class="el-icon-circle-plus" /> 待审核
						</span>
					</div>
				</div>
				<div class="fbutton">
					<div class="add" @click="doGoodsListStatus(1)">
						<span>
							<i class="el-icon-remove" /> 审核通过
						</span>
					</div>
				</div>
				<div class="fbutton">
					<div class="add" @click="doGoodsListStatus(2)">
						<span>
							<i class="el-icon-remove" /> 审核失败
						</span>
					</div>
				</div>
			</div>
			<a href @click.prevent="refresh()" class="refresh-date">
				<div title="刷新数据" class="pReload">
					<i class="fa fa-refresh"></i>
				</div>
			</a>
			<div class="searchbox">
				
				<el-cascader size="small" clearable filterable placeholder="商品分类" v-model="categoryId" :options="goodsCategoryTree"
				 :props="{label: 'name', value: 'id', checkStrictly: true}"></el-cascader>
				 
				<el-select v-model="brandId" size="small" filterable clearable placeholder="品牌">
					<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>

				<el-input placeholder="搜索内容" v-model="searchWords" class="input-with-select searchinput" size="small" clearable>
					<el-select v-model="searchSelect" slot="prepend" placeholder="搜索类型">
						<el-option label="商品名称" value="1"></el-option>
						<el-option label="货号" value="2"></el-option>
					</el-select>
					<el-button slot="append" size="small" icon="el-icon-search" @click="currentPage = 1;getPage()">搜索</el-button>
				</el-input>

			</div>
		</div>
		<div class="tablebox">
			<el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="商品ID" prop="goods_id" width="100"></el-table-column>
				<el-table-column label="商品名称" prop="goods_name" width="130" show-overflow-tooltip></el-table-column>
				<el-table-column label="货号" prop="goods_sn" width="150">
					<template slot-scope="scope">{{scope.row.goods_sn || '--'}}</template>
				</el-table-column>
				<el-table-column label="分类" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.goods_category_list[0].name}}>{{scope.row.goods_category_list[1].name}}>{{scope.row.goods_category_list[2].name}}
					</template>
				</el-table-column>
				<el-table-column label="价格" prop="shop_price" width="100" :formatter="toFixedPrice"></el-table-column>
				<el-table-column label="库存" prop="store_count" width="100"></el-table-column>
				<el-table-column label="上架时间" prop="on_time_desc" width="100"></el-table-column>
				<el-table-column label="商品状态" prop="goods_state_desc" width="100"></el-table-column>
				<el-table-column label="审核状态" prop="goods_state_desc" width="100"></el-table-column>
				<el-table-column label="店铺名称" prop="store_name" width="150" show-overflow-tooltip></el-table-column>
				<el-table-column label="店铺类型" prop="is_own_shop_desc" width="100"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button-group>
							<el-button size="small" v-if="scope.row.goods_state < 3 && scope.row.is_on_sale < 2" @click="offSaleDialog(scope)"
							 icon="el-icon-error">下架</el-button>
							<el-button size="small" @click="goodsDetail(scope.row.goods_id)" icon="el-icon-s-order">查看</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background class="paginationbox" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalCount"></el-pagination>
		</div>
		<el-dialog title="违规下架理由" :visible.sync="dialogFormVisible" width="30%" :modal-append-to-body="false" center>
			<el-form :model="offSaleGoods">
				<el-form-item label="违规下架理由" label-width="120px">
					<el-input v-model="offSaleGoods.close_reason" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="offSale()">下 架</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getGoodsPage,
		updateGoods,
		updateGoodsList,
		getGoodsCategoryTree
	} from "@/utils/api";
	export default {
		data() {
			return {
				tableData: [],
				currentPage: this.$route.params.currentPage || 1,
				totalCount: 0,
				pageSize: 10,
				categoryId: null,
				goodsCategoryTree: [], //商品分类
				brandId: null,
				brandList: null,
				searchSelect: '',
				searchWords: '',
				dialogFormVisible: false,
				offSaleGoods: {}, //操作下架商品
				doGoodsList: [], //批量操作的商品
				goodsState: null || this.$route.params.goodsState,
				isOnSale: null
			};
		},
		created() {
			this.getPage();
			this.getGoodsCategoryTree();
			this.getBrandList();
		},
		methods: {
			handleSizeChange(e) {
				this.pageSize = e;
				this.getPage();
			},
			handleCurrentChange(e) {
				this.currentPage = e;
				this.getPage();
			},
			getPage() {
				var that = this;
				var query = {
					cat_id: this.categoryId == null ?
						null :
						this.categoryId[this.categoryId.length - 1],
					brand_id: this.brandId,
					goods_state: this.goodsState,
					is_on_sale: this.isOnSale,
					p: this.currentPage,
					size: this.pageSize
				};
				if (this.searchSelect == 1) {
					query.goods_name = this.searchWords
				} 
				if (this.searchSelect == 2){
					query.goods_sn = this.searchWords
				}
				getGoodsPage(query).then(function(res) {
					that.tableData = res.records;
					that.totalCount = res.total;
				});
			},
			refresh() {
				this.getPage();
				this.$message.success("刷新成功！");
			},
			offSaleDialog(scope) {
				this.dialogFormVisible = true;
				this.offSaleGoods = {
					goods_id: scope.row.goods_id,
					is_on_sale: 2
				};
			},
			offSale() {
				var that = this;
				updateGoods(this.offSaleGoods).then(function(res) {
					that.dialogFormVisible = false;
					if (res.status == 1) {
						that.$message.success("下架成功！");
						that.getPage();
					} else {
						that.$message.error("操作失败,失败原因" + res.msg);
					}
				});
			},
			handleSelectionChange(val) {
				this.doGoodsList = val;
			},
			toFixedPrice(row) {
				return row.shop_price.toFixed(2);
			},
			doGoodsListStatus(goodsState) {
				var that = this;
				var goodsList = [];
				this.doGoodsList.forEach(function(item) {
					goodsList.push({
						goods_id: item.goods_id,
						goods_state: goodsState
					});
				});
				updateGoodsList(goodsList).then(function(res) {
					if (res.status == 1) {
						that.$message.success("批量操作成功！");
						that.getPage();
					} else {
						that.$message.error("批量操作失败,失败原因" + res.msg);
					}
				});
			},
			goodsDetail(goods_id) {
				window.open(this.$store.state.pcUrl  + '/goods/goodsInfo?id=' + goods_id,"_blank");
			},
			getGoodsCategoryTree() {
				var that = this;
				getGoodsCategoryTree({
					levels: "1,2,3"
				}).then(function(res) {
					that.goodsCategoryTree = res;
				});
			},
			getBrandList() {
				var that = this;
				this.request.get("mall/brand/list").then(function(res) {
					that.brandList = res;
				});
			}
		}
	};
</script>

<style scoped>
	.searchinput {
		width: auto;
	}
	
</style>
